.<template>
  <div>
    <div class="merchapp" ref="wrapper">
      <div>
        <div class="apptop">
          <div class="apptop-title">
            <div class="title-left">
              <div class="title-left-title">
                <span>{{ evaluate.name }}</span>
              </div>
              <div class="title-left-bom">
                <span>
                  <van-rate
                    v-model="evaluate.score"
                    allow-half
                    void-icon="star"
                    void-color="#eee"
                    color="Orange"
                    :size="20"
                    readonly
                  />
                </span>
                <span>（{{ evaluate.ratingCount }}）</span>
                <span>月售{{ evaluate.sellCount }}单</span>
              </div>
            </div>
            <div class="title-right">
              <span class="icon">
                <svg
                  t="1622805657077"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2169"
                  width="30"
                  height="30"
                >
                  <path
                    d="M512 919.194002l-64.352657-58.361199C219.085764 653.353378 68.191078 516.438079 68.191078 348.900342c0-136.915299 107.180068-244.094344 244.094344-244.094344 77.222779 0 151.3388 35.948747 199.713554 92.53451 48.374754-56.585763 122.490775-92.53451 199.713554-92.53451 136.915299 0 244.094344 107.180068 244.094344 244.094344 0 167.537737-150.894685 304.453037-379.456265 511.933485L512 919.194002z"
                    p-id="2170"
                    fill="#d81e06"
                  ></path>
                </svg>
              </span>
              <div>已收藏</div>
            </div>
          </div>
          <div class="wit"></div>
          <div class="apptop-bom">
            <div class="start start1">
              <div>起送价</div>
              <div class="price">
                <span>{{ evaluate.minPrice }}</span>
                <span>元</span>
              </div>
            </div>
            <div class="start">
              <div>商家配送</div>
              <div class="price">
                <span>{{ evaluate.deliveryPrice }}</span>
                <span>元</span>
              </div>
            </div>
            <div class="start">
              <div>平均配送时间</div>
              <div class="price">
                <span>{{ evaluate.deliveryTime }}</span>
                <span>分钟</span>
              </div>
            </div>
          </div>
        </div>
        <div class="graybg"></div>
        <div class="noticebox">
          <div class="noticebox-title">
            <h1>公告和活动</h1>
          </div>
          <div class="container">
            <span>{{ evaluate.bulletin }}</span>
          </div>
          <ul
            class="onsalebox"
            v-for="(item, index) in evaluate.supports"
            :key="index"
          >
            <li class="onsalebox-item">
              <img src="../../assets/images/special_1@2x.png" alt="" />
              <span>{{ item.content }}</span>
            </li>
          </ul>
        </div>
        <div class="graybg"></div>
        <div class="photo">
          <div class="photo-title">商家实景</div>
          <div class="photo-item" ref="photo">
            <div class="content">
              <div
                class="photo-img"
                v-for="(item, index) in evaluate.pics"
                :key="index"
              >
                <img :src="item" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import BScroll from "better-scroll";
import Vue from "vue";
import { Rate } from "vant";

Vue.use(Rate);
export default {
  name: "merchant",
  props: {},
  computed: {
    ...mapState(["evaluate"]),
  },
  methods: {
    initScroll() {
      this.$nextTick(() => {
        if (!this.Scroll) {
          this.Scroll = new BScroll(this.$refs.wrapper, {
            click: true, // 配置允许点击事件
            scrollY: true, // 开启纵向滚动
            // mouseWheel: true,
          });
        } else {
          this.Scroll.refresh();
          // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
          console.log(2222);
        }
      });
      console.log(1111);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initScroll();
    });

    this.$nextTick(() => {
      new BScroll(this.$refs.photo, {
        click: true,
        scrollX: true,
      });
    });
  },
};
</script>

<style lang="less" scoped>
.merchapp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 4.64rem;
  width: 100%;
  overflow: hidden;
  .apptop {
    .apptop-title {
      display: flex;
      justify-content: space-between;
      padding-top: 36px;
      padding-bottom: 36px;
      .title-left {
        padding-left: 36px;
        .title-left-title {
          padding-bottom: 16px;
          span {
            font-size: 28px;
            color: rgb(7, 17, 27);
            line-height: 28px;
          }
        }
        .title-left-bom {
          height: 36px;
          span {
            font-size: 20px;
            color: rgb(77, 85, 93);
            line-height: 36px;
          }
        }
      }
      .title-right {
        padding-right: 36px;
        div {
          padding-top: 8px;
          font-size: 20px;
          color: rgb(77, 85, 93);
          line-height: 20px;
        }
      }
    }
    .wit {
      border-bottom: 1px solid;
      border-color: rgba(7, 17, 27, 0.1);
      margin-right: 35px;
      margin-left: 35px;
    }
    .apptop-bom {
      padding-top: 36px;
      padding-bottom: 36px;
      display: flex;
      // justify-content: space-around;
      .start {
        padding-bottom: 8px;
        border-right: 1px solid #ccc;
        width: 33%;
        margin-left: 60px;
        div {
          font-size: 20px;
          color: rgb(147, 153, 159);
          line-height: 20px;
        }
        .price {
          height: 50px;
          padding-left: 25px;
          padding-top: 8px;
          span:first-child {
            font-size: 48px;
            font-weight: 200;
            color: rgb(7, 17, 27);
            line-height: 48px;
          }
          span:last-child {
            font-size: 20px;
            font-weight: 200;
            color: rgb(7, 17, 27);
            line-height: 48px;
            vertical-align: text-top;
            padding-left: 5px;
          }
        }
      }
    }
  }
  .graybg {
    width: 100%;
    height: 32px;
    border-top: 1px solid rgba(7, 17, 27, 0.1);
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    background: #f3f5f7;
  }
  .noticebox {
    .noticebox-title {
      padding-top: 36px;
      padding-bottom: 16px;
      h1 {
        font-size: 30px;
        font-weight: 700px;
        padding-left: 26px;
      }
    }
    .container {
      margin-left: 32px;
      margin-right: 34px;
      padding-bottom: 32px;
      border-bottom: 1px solid #ccc;
      span {
        padding-left: 35px;
        font-size: 24px;
        font-weight: 200px;
        color: rgb(240, 20, 20);
        line-height: 48px;
      }
    }
    .onsalebox {
      padding-top: 32px;
      padding-bottom: 32px;
      margin-left: 34px;
      margin-right: 34px;
      border-bottom: 1px solid #ccc;
      .onsalebox-item {
        img {
          padding-right: 12px;
        }
        span {
          font-size: 24px;
          font-weight: 200;
          color: rgb(7, 17, 27);
          line-height: 32px;
        }
      }
    }
  }
  .photo {
    margin-left: 36px;
    width: 100%;

    .photo-title {
      padding-top: 36px;
      padding-bottom: 24px;
    }
    .photo-item {
      width: 100%;
      white-space: nowrap;
      display: inline-block;
      .content {
        overflow: hidden;

        .photo-img {
          width: 240px;
          height: 180px;
          display: inline-block;

          img {
            width: 240px;
            height: 180px;
          }
        }
      }
    }
  }
}
</style>